<template>
  <view class="audit-detail-page">
    <!-- 项目基本信息 -->
    <view class="info-section">
      <view class="section-title">
        <text class="title-text">项目基本信息</text>
        <text class="project-status" :class="statusClass">{{ projectInfo.status || '未知' }}</text>
      </view>

      <!-- 项目基础信息 -->
      <view class="info-category">
        <view class="category-title">项目信息</view>
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">项目名称</text>
            <text class="info-value primary">{{ projectInfo.project_name || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">客户名称</text>
            <text class="info-value">{{ projectInfo.customer_name || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">客户等级</text>
            <text class="info-value">{{ projectInfo.customer_level || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">客户来源</text>
            <text class="info-value">{{ projectInfo.customer_source || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">项目地址</text>
            <text class="info-value">{{ projectInfo.input_address || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">跟进状态</text>
            <text class="info-value">{{ projectInfo.follow_status || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ projectInfo.createtime || '未知' }}</text>
          </view>
        </view>
      </view>

      <!-- 联系人信息 -->
      <view class="info-category">
        <view class="category-title">联系人信息</view>
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">负责人电话</text>
            <text class="info-value phone" @click="callPhone(projectInfo.manager_phone)">{{ projectInfo.manager_phone || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">现场管理人</text>
            <text class="info-value">{{ projectInfo.site_manager || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">现场管理人电话</text>
            <text class="info-value phone" @click="callPhone(projectInfo.site_manager_phone)">{{ projectInfo.site_manager_phone || '未知' }}</text>
          </view>
        </view>
      </view>

      <!-- 产品信息 -->
      <view class="info-category">
        <view class="category-title">产品信息</view>
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">生产数量</text>
            <text class="info-value">{{ projectInfo.production_quantity || '未知' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">产品型号</text>
            <text class="info-value">{{ projectInfo.product_model || '未知' }}</text>
          </view>
        </view>
      </view>

      <!-- 合同信息 -->
      <view class="info-category">
        <view class="category-title">合同信息</view>
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">合同编号</text>
            <text class="info-value">{{ projectInfo.contract_number || '未设置' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">合同金额</text>
            <text class="info-value amount">{{ projectInfo.contract_money ? `¥${formatAmount(projectInfo.contract_money)}` : '未设置' }}</text>
          </view>
        </view>

        <!-- 合同图片 -->
        <view class="contract-files" v-if="contractImages && contractImages.length > 0">
          <view class="files-title">合同图片</view>
          <view class="image-count-tip">共 {{ contractImages.length }} 张</view>
          <view class="image-grid">
            <view
              class="image-item"
              v-for="(img, index) in contractImages"
              :key="index"
              @click="previewImage(img, contractImages)"
            >
              <image :src="img" class="contract-img" mode="aspectFill" />
              <view class="image-overlay">
                <text class="image-icon">查看</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 财务信息 -->
      <view class="info-category">
        <view class="category-title">财务信息</view>
        <view class="finance-grid">
          <view class="finance-item">
            <text class="finance-label">结算金额</text>
            <text class="finance-value settlement">{{ projectInfo.settlement_amount ? `¥${formatAmount(projectInfo.settlement_amount)}` : '¥0.00' }}</text>
          </view>
          <view class="finance-item">
            <text class="finance-label">开票金额</text>
            <text class="finance-value invoiced">{{ projectInfo.invoiced_amount ? `¥${formatAmount(projectInfo.invoiced_amount)}` : '¥0.00' }}</text>
          </view>
          <view class="finance-item">
            <text class="finance-label">未开票金额</text>
            <text class="finance-value uninvoiced">{{ uninvoicedAmountDisplay }}</text>
          </view>
          <view class="finance-item">
            <text class="finance-label">实收金额</text>
            <text class="finance-value received">{{ actualReceivedAmountDisplay }}</text>
          </view>
          <view class="finance-item">
            <text class="finance-label">未收金额</text>
            <text class="finance-value unpaid">{{ unpaidAmountDisplay }}</text>
          </view>
        </view>
      </view>

      <!-- 结算图片 -->
      <view class="info-section" v-if="settlementImages && settlementImages.length > 0">
        <view class="section-title">
          <text class="title-text">结算图片</text>
          <text class="image-count-badge">{{ settlementImages.length }} 张</text>
        </view>
        <view class="image-grid">
          <view
            class="image-item"
            v-for="(img, index) in settlementImages"
            :key="index"
            @click="previewImage(img, settlementImages)"
          >
            <image :src="img" class="settlement-img" mode="aspectFill" />
            <view class="image-overlay">
              <text class="image-icon">查看</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 开票图片 -->
      <view class="info-section" v-if="invoiceImages && invoiceImages.length > 0">
        <view class="section-title">
          <text class="title-text">开票图片</text>
          <text class="image-count-badge">{{ invoiceImages.length }} 张</text>
        </view>
        <view class="image-grid">
          <view
            class="image-item"
            v-for="(img, index) in invoiceImages"
            :key="index"
            @click="previewImage(img, invoiceImages)"
          >
            <image :src="img" class="invoice-img" mode="aspectFill" />
            <view class="image-overlay">
              <text class="image-icon">查看</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 实收图片 -->
      <view class="info-section" v-if="allReceivedImages && allReceivedImages.length > 0">
        <view class="section-title">
          <text class="title-text">实收图片</text>
          <text class="image-count-badge">{{ allReceivedImages.length }} 张</text>
        </view>
        <view class="image-grid">
          <view
            class="image-item"
            v-for="(img, index) in allReceivedImages"
            :key="index"
            @click="previewImage(img, allReceivedImages)"
          >
            <image :src="img" class="received-img" mode="aspectFill" />
            <view class="image-overlay">
              <text class="image-icon">查看</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 备注信息 -->
    <view class="info-section" v-if="projectInfo.remark">
      <view class="section-title">备注信息</view>
      <view class="remark-content">
        <text>{{ projectInfo.remark }}</text>
      </view>
    </view>



    <!-- 数据变更对比 -->
    <view class="info-section" v-if="dataChanges && dataChanges.length > 0">
      <view class="section-title">
        <text class="title-text">数据变更对比</text>
        <text class="change-count-badge">{{ dataChanges.length }} 项变更</text>
      </view>
      <view class="changes-list">
        <view v-for="(change, index) in dataChanges" :key="index" class="change-item">
          <view class="change-header">
            <text class="change-field">{{ change.fieldName }}</text>
            <text class="change-type" :class="'change-type-' + change.changeType">{{ getChangeTypeText(change.changeType) }}</text>
          </view>
          <view class="change-content">
            <!-- 图片字段特殊处理 -->
            <view v-if="isImageField(change.field)" class="contract-file-changes">
              <view class="change-row">
                <text class="change-label">原值：</text>
                <view class="file-images" v-if="parseImages(change.oldValue).length > 0">
                  <view
                    class="file-image-item"
                    v-for="(img, imgIndex) in parseImages(change.oldValue)"
                    :key="imgIndex"
                    @click="previewImage(img, parseImages(change.oldValue))"
                  >
                    <image :src="img" class="file-img" mode="aspectFill" />
                    <view class="file-overlay">
                      <text class="file-icon">查看</text>
                    </view>
                  </view>
                </view>
                <text v-else class="change-old-value">{{ change.oldValue === '无图片' ? '无图片' : change.oldValue }}</text>
              </view>
              <view class="change-row">
                <text class="change-label">新值：</text>
                <view class="file-images" v-if="parseImages(change.newValue).length > 0">
                  <view
                    class="file-image-item"
                    v-for="(img, imgIndex) in parseImages(change.newValue)"
                    :key="imgIndex"
                    @click="previewImage(img, parseImages(change.newValue))"
                  >
                    <image :src="img" class="file-img" mode="aspectFill" />
                    <view class="file-overlay">
                      <text class="file-icon">查看</text>
                    </view>
                  </view>
                </view>
                <text v-else class="change-new-value">{{ change.newValue === '无图片' ? '无图片' : change.newValue }}</text>
              </view>
            </view>
            <!-- 收款计划特殊处理 -->
            <view v-else-if="change.field === 'planList'" class="plan-list-changes">
              <view class="plan-details" v-if="change.planChanges && change.planChanges.length > 0">
                <view
                  v-for="(planChange, planIndex) in change.planChanges"
                  :key="planIndex"
                  class="plan-show-item"
                >
                  <view class="plan-show-header">
                    <text class="plan-show-title">{{ planChange.message }}</text>
                    <text class="plan-show-status" :class="'plan-status-' + getPlanStatusClass(planChange.data && planChange.data.status)">{{ getPlanStatusText(planChange.data && planChange.data.status) }}</text>
                  </view>
                  <view class="plan-show-content">
                    <!-- 显示字段变更详情 -->
                    <view v-if="planChange.changes && planChange.changes.length > 0" class="plan-changes-detail">
                      <view v-for="(fieldChange, fieldIndex) in planChange.changes" :key="fieldIndex" class="plan-field-change">
                        <view class="plan-field-row">
                          <text class="plan-field-label">{{ fieldChange.fieldName }}：</text>
                          <view class="plan-field-values">
                            <text class="plan-field-old">原值：{{ fieldChange.oldValue }}</text>
                            <text class="plan-field-new">新值：{{ fieldChange.newValue }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <!-- 显示完整的新数据（用于新增和删除的情况） -->
                    <view v-else class="plan-full-data">
                      <view class="plan-show-row">
                        <text class="plan-show-label">计划收款金额：</text>
                        <text class="plan-show-value plan-amount">¥{{ (planChange.data && planChange.data.payment_amount) || '空' }}</text>
                      </view>
                      <view class="plan-show-row">
                        <text class="plan-show-label">实际收款金额：</text>
                        <text class="plan-show-value plan-amount">¥{{ (planChange.data && planChange.data.actual_received_amount) || '空' }}</text>
                      </view>
                      <view class="plan-show-row">
                        <text class="plan-show-label">收款时间：</text>
                        <text class="plan-show-value">{{ (planChange.data && planChange.data.payment_time) || '空' }}</text>
                      </view>
                    </view>
                    <view v-if="planChange.data && planChange.data.images" class="plan-show-row">
                      <text class="plan-show-label">相关图片：</text>
                      <view class="plan-images">
                        <view 
                          v-for="(img, imgIndex) in parseImages(planChange.data && planChange.data.images)" 
                          :key="imgIndex"
                          @click="previewImage(img, parseImages(planChange.data && planChange.data.images))"
                          class="plan-image-item"
                        >
                          <image :src="img" class="plan-img" mode="aspectFill" />
                          <view class="plan-image-overlay">
                            <text class="plan-image-icon">查看</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 其他字段正常显示 -->
            <view v-else>
              <view class="change-row">
                <text class="change-label">原值：</text>
                <text class="change-old-value">{{ change.oldValue === '无图片' ? '无图片' : change.oldValue }}</text>
              </view>
              <view class="change-row">
                <text class="change-label">新值：</text>
                <text class="change-new-value">{{ change.newValue === '无图片' ? '无图片' : change.newValue }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 收款计划 -->
    <view class="info-section" v-if="projectPlanList && projectPlanList.length > 0">
      <view class="section-title">
        <text class="title-text">收款计划</text>
        <text class="plan-count-badge">{{ projectPlanList.length }} 个计划</text>
      </view>
      <view class="plan-list">
        <view v-for="(plan, index) in projectPlanList" :key="plan.id" class="plan-item">
          <view class="plan-header">
            <text class="plan-title">{{ plan.content || `第${index + 1}期` }}</text>
            <text class="plan-status" :class="'plan-status-' + getPlanStatusClass(plan && plan.status)">{{ getPlanStatusText(plan && plan.status) }}</text>
          </view>
          <view class="plan-content">
            <view class="plan-row">
              <text class="plan-label">计划收款金额：</text>
              <text class="plan-value plan-amount">¥{{ plan.payment_amount || '0' }}</text>
            </view>
            <view class="plan-row">
              <text class="plan-label">实际收款金额：</text>
              <text class="plan-value plan-amount">¥{{ plan.actual_received_amount || '0' }}</text>
            </view>
            <view class="plan-row">
              <text class="plan-label">收款时间：</text>
              <text class="plan-value">{{ plan.payment_time || '未设置' }}</text>
            </view>
            <view v-if="plan.images" class="plan-row">
              <text class="plan-label">相关图片：</text>
              <view class="plan-images">
                <view
                  v-for="(img, imgIndex) in parseImages(plan.images)"
                  :key="imgIndex"
                  @click="previewImage(img, parseImages(plan.images))"
                  class="plan-image-item"
                >
                  <image :src="img" class="plan-img" mode="aspectFill" />
                  <view class="plan-image-overlay">
                    <text class="plan-image-icon">查看</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 审批流程 -->
    <view class="flow-section">
      <view class="flow-header-bar">
        <text class="flow-main-title">审批流程</text>
        <text class="flow-node-count">{{ flowList.length }} 个节点</text>
      </view>

      <view class="flow-container">
        <view v-for="(flow, index) in flowList" :key="flow.id" class="flow-node">
          <!-- 节点序号 -->
          <view class="node-index">
            <text class="index-number">{{ index + 1 }}</text>
            <view v-if="index < flowList.length - 1" class="index-line"></view>
          </view>

          <!-- 节点卡片 -->
          <view class="node-card" :class="{ 'active-node': flow.isCurrentApprover }">
            <!-- 审批人信息 -->
            <view class="node-header">
              <view class="user-info">
                <text class="user-name">{{ flow.user_name }}</text>
                <text class="user-status" :class="[ getFlowStatusClass(flow.status_before), { 'current-user': flow.isCurrentApprover } ]">{{ getFlowStatusText(flow.status_before) }}</text>
              </view>
              <text class="node-time">{{ flow.createtime }}</text>
            </view>

            <!-- 审批意见 -->
            <view class="node-remark" v-if="flow.remark">
              <text class="remark-title" v-if="isFlowNodeManager(flow)">审批意见</text>
              <text class="remark-content">{{ flow.remark }}</text>
            </view>

            <!-- 预留：数据变更区域 -->
            <view class="node-changes" v-if="flow.changes && flow.changes.length > 0">
              <text class="changes-title">数据变更 ({{ flow.changes.length }})</text>
              <view class="changes-content">
                <!-- 这里可以展示具体的变更信息 -->
                <text class="changes-placeholder">变更详情待展示</text>
              </view>
            </view>

            <!-- 预留：相关文件区域 -->
            <view class="node-files" v-if="flow.files && flow.files.length > 0">
              <text class="files-title">相关文件 ({{ flow.files.length }})</text>
              <view class="files-content">
                <!-- 这里可以展示相关文件 -->
                <text class="files-placeholder">文件列表待展示</text>
              </view>
            </view>

            <!-- 当前审批人标识 -->
            <view v-if="flow.isCurrentApprover" class="current-tag">
              <text class="tag-text">当前审批人</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="flowList.length === 0" class="flow-empty-state">
          <text class="empty-icon">暂无</text>
          <text class="empty-text">暂无审批流程数据</text>
        </view>
      </view>
    </view>

    <!-- 审核历史 -->
    <view class="info-section" v-if="auditHistory.records && auditHistory.records.length > 0">
      <view class="section-title">审核历史</view>
      <view class="audit-history">
        <view v-for="(record, index) in auditHistory.records" :key="index" class="history-item">
          <view class="history-header">
            <text class="history-role">{{ record.role_name }}</text>
            <text class="history-time">{{ record.audit_time }}</text>
          </view>
          <view class="history-content">
            <text class="history-action">{{ record.action === 'approve' ? '通过' : '拒绝' }}</text>
            <text class="history-opinion" v-if="record.opinion">{{ record.opinion }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 审核操作 -->
    <view class="action-section">
      <view class="action-header">
        <text class="action-title">审核操作</text>
        <text class="action-subtitle">请填写审核意见</text>
      </view>

      <view class="opinion-input">
        <textarea
          class="opinion-textarea"
          v-model="auditOpinion"
          placeholder="请输入审核意见..."
          maxlength="200"
        ></textarea>
        <text class="opinion-count">{{ auditOpinion.length }}/200</text>
      </view>

      <view class="action-buttons">
        <button
          class="action-btn approve-btn"
          :class="{ 'disabled': !canApprove }"
          :disabled="!canApprove || isSubmitting"
          @click="approveProject"
        >
          通过审核
        </button>
        <button
          class="action-btn reject-btn"
          :class="{ 'disabled': !canApprove }"
          :disabled="!canApprove || isSubmitting"
          @click="rejectProject"
        >
          拒绝审核
        </button>
      </view>
    </view>


  </view>
</template>

<script>
import http from '@/common/vmeitime-http/interface.js'

export default {
  data() {
    return {
      projectId: '',
      projectInfo: {},
      auditOpinion: '', // 审核意见
      isSubmitting: false, // 是否正在提交
      flowList: [], // 审批流程数据
      canApprove: false, // 是否可以审核
      currentApproverId: null, // 当前审批人ID
      auditHistory: { // 审核历史
        records: []
      },
      projectLog: [], // 项目日志数据
      oldProjectData: {}, // 旧的项目数据
      dataChanges: [], // 数据变更对比结果
      projectPlanList: [] // 项目计划列表数据
    }
  },

  computed: {
    // 判断是否为经理角色
    isManager() {
      const userRole = uni.getStorageSync('user-role') || uni.getStorageSync('user_role');
      const isManagerRole = userRole == 4; // 4表示经理端
      console.log('用户角色检查:', {
        userRole: userRole,
        isManager: isManagerRole,
        type: typeof userRole
      });
      return isManagerRole;
    },
    
    // 项目状态样式类
    statusClass() {
      const status = this.projectInfo.status;
      if (status === '已签约') return 'completed';
      if (status === '待签约') return 'pending';
      if (status === '异常') return 'abnormal';
      return 'unknown';
    },

    // 未开票金额（直接从后端字段获取）
    uninvoicedAmountCalculated() {
      try {
        return parseFloat(this.projectInfo.uninvoiced_amount) || 0;
      } catch (error) {
        return 0;
      }
    },

    uninvoicedAmountDisplay() {
      const amount = this.uninvoicedAmountCalculated;
      return `¥${this.formatAmount(amount)}`;
    },

    // 实收金额（从 actual_received_total_amount 字段获取）
    actualReceivedAmountCalculated() {
      try {
        return parseFloat(this.projectInfo.actual_received_total_amount) || 0;
      } catch (error) {
        return 0;
      }
    },

    actualReceivedAmountDisplay() {
      const amount = this.actualReceivedAmountCalculated;
      return `¥${this.formatAmount(amount)}`;
    },

    // 计算未收金额（结算金额 - 实收金额）
    unpaidAmountCalculated() {
      try {
        const settlement = parseFloat(this.projectInfo.settlement_amount) || 0;
        const received = this.actualReceivedAmountCalculated;
        const value = settlement - received;
        return value < 0 ? 0 : value;
      } catch (error) {
        return 0;
      }
    },

    unpaidAmountDisplay() {
      const amount = this.unpaidAmountCalculated;
      return `¥${this.formatAmount(amount)}`;
    },

    // 处理合同照片
    contractImages() {
      return this.parseImages(this.projectInfo.contract_file);
    },

    // 处理结算凭证图片
    settlementImages() {
      return this.parseImages(this.projectInfo.settlement_images);
    },

    // 处理开票凭证图片
    invoiceImages() {
      return this.parseImages(this.projectInfo.invoiced_images);
    },

    // 处理收款凭证图片
    paymentImages() {
      return this.parseImages(this.projectInfo.payment_images);
    },

    // 处理实收金额图片
    actualReceivedImages() {
      return this.parseImages(this.projectInfo.actual_received_images);
    },

    // 合并所有实收相关的图片
    allReceivedImages() {
      const paymentImgs = this.paymentImages || [];
      const actualReceivedImgs = this.actualReceivedImages || [];

      // 合并所有实收相关图片，去重
      const allImages = [...paymentImgs, ...actualReceivedImgs];
      return [...new Set(allImages)]; // 去重
    }
  },

  onLoad(options) {
    console.log('审核详情页面加载，参数:', options);

    // 通过eventChannel接收数据
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', (data) => {
      console.log('接收到传递的数据:', data);
      if (data && data.data) {
        this.projectInfo = data.data;
        this.projectId = this.projectInfo.id || '未知';
        console.log('设置后的项目信息:', this.projectInfo);
        console.log('项目ID:', this.projectId);

        // 使用$nextTick确保在下一个DOM更新周期执行
        this.$nextTick(() => {
          // 先获取审批流程数据
          this.getFlowList();
          // 先获取项目日志数据，完成后再获取项目计划列表
          this.getProjectLog().then(() => {
            // 项目日志数据获取完成后再获取项目计划列表
            this.getProjectPlanList();
          }).catch(() => {
            // 如果项目日志获取失败，仍然获取项目计划列表
            this.getProjectPlanList();
          });
        });
      }
    });
  },

  methods: {
    // 判断流程节点角色是否为经理
    isFlowNodeManager(flow) {
      // 根据status_after字段判断是否为经理
      const statusAfter = flow.status_after;
      const isManager = statusAfter === '经理审核' || statusAfter === '经理审批';
      console.log('流程节点角色检查:', {
        flow: flow,
        status_after: statusAfter,
        isManager: isManager
      });
      return isManager;
    },
    
    // 审批流程状态文案映射
    getFlowStatusText(status) {
      const map = {
        '新增': '新增',
        '已签约': '已签约',
        '合同审批': '合同审批',
        '收款计划审批': '收款计划审批',
        '收款中': '收款中',
        '待审批': '待审批',
        '已通过': '已通过',
        '已拒绝': '已拒绝'
      };
      return map[status] || status || '未知';
    },
    // 审批流程状态样式类
    getFlowStatusClass(status) {
      const classMap = {
        '新增': 'status-add',
        '已签约': 'status-signed',
        '合同审批': 'status-contract',
        '收款计划审批': 'status-pending',
        '收款中': 'status-pending',
        '待审批': 'status-pending',
        '已通过': 'status-approved',
        '已拒绝': 'status-rejected'
      };
      return classMap[status] || 'status-unknown';
    },
    // 格式化金额
    formatAmount(amount) {
      if (amount === null || amount === undefined || isNaN(amount)) {
        return '0.00';
      }
      const num = parseFloat(amount);
      return num.toFixed(2);
    },

    // 解析图片数据，支持字符串和数组格式，专门处理多张图片
    parseImages(images) {
      if (!images) {
        return [];
      }

      // 如果是"无图片"字符串，返回空数组
      if (images === '无图片') {
        return [];
      }

      // 如果已经是数组，过滤掉空值并返回
      if (Array.isArray(images)) {
        return images.filter(url => url && url.trim() !== '');
      }

      // 如果是字符串，按逗号分割并过滤空值
      if (typeof images === 'string' && images.trim() !== '') {
        return images.split(',')
          .map(url => url.trim())
          .filter(url => url !== '');
      }

      // 其他情况返回空数组
      return [];
    },

    // 预览图片（支持多张图片浏览）
    previewImage(currentImg, imageList) {
      if (imageList && imageList.length > 0) {
        // 确保当前图片在列表中
        const validUrls = imageList.filter(url => url && url.trim() !== '');
        if (validUrls.length === 0) {
          uni.showToast({
            title: '图片加载失败',
            icon: 'none'
          });
          return;
        }

        // 如果当前图片不在有效列表中，使用第一张
        const current = validUrls.includes(currentImg) ? currentImg : validUrls[0];

        uni.previewImage({
          urls: validUrls,
          current: current,
          fail: (err) => {
            console.error('预览图片失败:', err);
            uni.showToast({
              title: '预览失败',
              icon: 'none'
            });
          }
        });
      } else {
        uni.showToast({
          title: '暂无图片',
          icon: 'none'
        });
      }
    },

    // 拨打电话
    callPhone(phone) {
      if (phone && phone !== '未知') {
        uni.makePhoneCall({
          phoneNumber: phone,
          fail: (err) => {
            console.log('拨打电话失败:', err);
          }
        });
      }
    },



    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${month}/${day} ${hours}:${minutes}`;
    },

    // 获取审批流程数据
    async getFlowList() {
      try {
        console.log('开始获取审批流程，项目ID:', this.projectId);

        // 使用正确的相对路径，避免baseUrl重复
        let response;
        try {
          response = await http.post('project/getFlowList', {
            id: this.projectId
          });
          console.log('接口响应:', response);
        } catch (error) {
          console.log('接口调用失败，尝试备用方案:', error);

          // 备用方案：使用uni.request直接调用完整URL
          try {
            const token = uni.getStorageSync('sc-token') || '';
            response = await new Promise((resolve, reject) => {
              uni.request({
                url: 'https://data.web1995.top/api/project/getFlowList',
                method: 'POST',
                data: { id: this.projectId },
                header: {
                  'Content-Type': 'application/json',
                  'token': token
                },
                success: (res) => resolve(res.data),
                fail: (err) => reject(err)
              });
            });
            console.log('备用方案响应:', response);
          } catch (error2) {
            console.log('备用方案也失败:', error2);
            throw error2;
          }
        }

        console.log('最终接口响应:', response);

        if (response && response.code === 1) {
          this.flowList = response.data || [];
          console.log('获取审批流程成功，数据条数:', this.flowList.length);
          console.log('流程数据详情:', this.flowList);

          // 获取审批流程成功后，继续调用审批人接口
          this.getFlowApprover();
        } else {
          console.error('获取审批流程失败:', response?.msg || '未知错误');
          this.flowList = [];
        }
      } catch (error) {
        console.error('获取审批流程异常:', error);

        // 显示错误信息
        uni.showToast({
          title: `接口调用失败: ${error.message || '未知错误'}`,
          icon: 'none',
          duration: 3000
        });

        this.flowList = [];
      }
    },

    // 获取审批人信息
    async getFlowApprover() {
      try {
        console.log('开始获取审批人信息，项目ID:', this.projectId);

        let response;
        try {
          response = await http.post('project/getFlowApprover', {
            id: this.projectId
          });
          console.log('审批人接口响应:', response);
        } catch (error) {
          console.log('审批人接口调用失败，尝试备用方案:', error);

          // 备用方案：使用uni.request直接调用完整URL
          try {
            const token = uni.getStorageSync('sc-token') || '';
            response = await new Promise((resolve, reject) => {
              uni.request({
                url: 'https://data.web1995.top/api/project/getFlowApprover',
                method: 'POST',
                data: { id: this.projectId },
                header: {
                  'Content-Type': 'application/json',
                  'token': token
                },
                success: (res) => resolve(res.data),
                fail: (err) => reject(err)
              });
            });
            console.log('审批人备用方案响应:', response);
          } catch (error2) {
            console.log('审批人备用方案也失败:', error2);
            throw error2;
          }
        }

        console.log('最终审批人接口响应:', response);

        if (response && response.code === 1) {
          // 处理审批人数据
          this.handleApproverData(response.data);
          console.log('获取审批人信息成功');
        } else {
          console.error('获取审批人信息失败:', response?.msg || '未知错误');
        }
      } catch (error) {
        console.error('获取审批人信息异常:', error);

        // 显示错误信息
        uni.showToast({
          title: `审批人接口调用失败: ${error.message || '未知错误'}`,
          icon: 'none',
          duration: 3000
        });
      }
    },

    // 处理审批人数据
    handleApproverData(data) {
      if (data && data.user_name && data.status) {
        // 创建新的审批流程项
        const newFlowItem = {
          id: Date.now(), // 使用时间戳作为临时ID
          user_name: data.user_name,
          status_before: data.status,
          remark: '当前审批人',
          createtime: new Date().toLocaleString(),
          isCurrentApprover: true, // 标记为当前审批人
          user_id: data.user_id // 保存审批人的user_id
        };

        // 将新数据插入到审批流程数组的末尾（最下面）
        this.flowList.push(newFlowItem);

        // 检查当前用户是否有审核权限
        this.checkApprovalPermission(data.user_id);
      }
    },

    // 检查审核权限
    checkApprovalPermission(approverUserId) {
      try {
        // 获取userinfo对象
        const userInfo = uni.getStorageSync('user-info');

        // 从userinfo中获取用户ID
        const localUserId = userInfo && userInfo.userinfo ? (userInfo.userinfo.id || userInfo.userinfo.user_id) : null;

        // 直接转换成数字比较
        const localUserIdNum = parseInt(localUserId);
        const approverUserIdNum = parseInt(approverUserId);

        // 简单比较：数字一样就可以审核
        if (localUserIdNum === approverUserIdNum) {
          this.canApprove = true;
        } else {
          this.canApprove = false;
        }
      } catch (error) {
        console.error('检查权限失败:', error);
        this.canApprove = false;
      }
    },

    // 审核通过
    async approveProject() {
      if (this.isSubmitting) return;
      this.isSubmitting = true;

      try {
        console.log('审核通过，项目ID:', this.projectId, '意见:', this.auditOpinion);

        // 获取本地存储的用户角色
        const userRole = uni.getStorageSync('user-role') || uni.getStorageSync('user_role');
        console.log('当前用户角色:', userRole);

        let response;
        let apiUrl;

        // 根据角色选择不同的接口
        if (userRole == 4) { // 经理端
          apiUrl = 'project/jlApprovedReview';
          console.log('调用经理端审核接口');
        } else if (userRole == 2) { // 财务端
          apiUrl = 'project/approvedReview';
          console.log('调用财务端审核接口');
        } else {
          throw new Error('未知的用户角色');
        }

        // 调用对应的审核接口
        try {
          response = await http.post(apiUrl, {
            id: this.projectId,
            remark: this.auditOpinion || '无意见'
          });
          console.log('审核接口响应:', response);
        } catch (error) {
          console.log('主要接口调用失败，尝试备用方案:', error);

          // 备用方案：使用uni.request直接调用完整URL
          try {
            const token = uni.getStorageSync('sc-token') || '';
            const fullUrl = userRole == 4
              ? 'https://data.web1995.top/api/project/jlApprovedReview'
              : 'https://data.web1995.top/api/project/approvedReview';

            response = await new Promise((resolve, reject) => {
              uni.request({
                url: fullUrl,
                method: 'POST',
                data: {
                  id: this.projectId,
                  remark: this.auditOpinion || '无意见'
                },
                header: {
                  'Content-Type': 'application/json',
                  'token': token
                },
                success: (res) => resolve(res.data),
                fail: (err) => reject(err)
              });
            });
            console.log('备用方案响应:', response);
          } catch (error2) {
            console.log('备用方案也失败:', error2);
            throw error2;
          }
        }

        // 处理接口响应
        if (response && response.code === 1) {
          uni.showToast({
            title: '审核通过成功',
            icon: 'success',
            duration: 2000
          });

          // 清空意见
          this.auditOpinion = '';

          // 可以在这里刷新页面数据或跳转
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        } else {
          throw new Error(response?.msg || '审核失败');
        }

      } catch (error) {
        console.error('审核通过失败:', error);
        uni.showToast({
          title: `审核失败: ${error.message}`,
          icon: 'none',
          duration: 3000
        });
      } finally {
        this.isSubmitting = false;
      }
    },

    // 获取项目日志数据
    async getProjectLog() {
      try {
        console.log('开始获取项目日志，项目ID:', this.projectId);

        let response;
        try {
          response = await http.post('project/getProjectLog', {
            id: this.projectId
          });
          console.log('项目日志接口响应:', response);
        } catch (error) {
          console.log('项目日志接口调用失败，尝试备用方案:', error);

          // 备用方案：使用uni.request直接调用完整URL
          try {
            const token = uni.getStorageSync('sc-token') || '';
            response = await new Promise((resolve, reject) => {
              uni.request({
                url: 'https://data.web1995.top/api/project/getProjectLog',
                method: 'POST',
                data: { id: this.projectId },
                header: {
                  'Content-Type': 'application/json',
                  'token': token
                },
                success: (res) => resolve(res.data),
                fail: (err) => reject(err)
              });
            });
            console.log('项目日志备用方案响应:', response);
          } catch (error2) {
            console.log('项目日志备用方案也失败:', error2);
            throw error2;
          }
        }

        console.log('最终项目日志接口响应:', response);

        if (response && response.code === 1) {
          this.projectLog = response.data || [];
          this.oldProjectData = response.data; // 直接赋值，如果是null就保持null
          console.log('获取项目日志成功，数据条数:', this.projectLog.length);

          // 注意：这里不调用对比方法，等两个接口都获取完再对比
          return Promise.resolve();
        } else {
          console.error('获取项目日志失败:', response?.msg || '未知错误');
          this.projectLog = [];
          this.oldProjectData = null; // 失败时设置为null
          return Promise.reject(new Error(response?.msg || '获取项目日志失败'));
        }
      } catch (error) {
        console.error('获取项目日志异常:', error);

        // 显示错误信息
        uni.showToast({
          title: `项目日志接口调用失败: ${error.message || '未知错误'}`,
          icon: 'none',
          duration: 3000
        });

        this.projectLog = [];
        this.oldProjectData = null;
        return Promise.reject(error);
      }
    },

    // 对比数据变更
    compareDataChanges() {
      try {
        // 如果旧数据为null或新数据为空，则不进行对比
        if (this.oldProjectData === null || !this.projectInfo) {
          this.dataChanges = [];
          return;
        }

        const changes = [];
        const oldData = this.oldProjectData;
        const newData = this.projectInfo;

        // 定义需要对比的字段及其显示名称
        const fieldsToCompare = {
          'customer_name': '客户名称',
          'project_name': '项目名称',
          'manager_phone': '负责人电话',
          'site_manager': '现场管理人',
          'site_manager_phone': '现场管理人电话',
          'customer_source': '客户来源',
          'customer_level': '客户等级',
          'follow_status': '跟进状态',
          'input_address': '项目地址',
          'production_quantity': '生产数量',
          'product_model': '产品型号',
          'contract_file': '合同文件',
          'contract_money': '合同金额',
          'contract_number': '合同编号',
          'settlement_amount': '结算金额',
          'settlement_images': '结算图片',
          'invoiced_amount': '开票金额',
          'invoiced_images': '开票图片',
          'uninvoiced_amount': '未开票金额',
          'remark': '备注'
        };

        // 遍历需要对比的字段
        Object.keys(fieldsToCompare).forEach(field => {
          const oldValue = oldData[field];
          const newValue = newData[field];
          const fieldName = fieldsToCompare[field];
          
          // 处理空值情况
          const oldVal = oldValue === null || oldValue === undefined ? '' : String(oldValue).trim();
          const newVal = newValue === null || newValue === undefined ? '' : String(newValue).trim();
          
          // 检查原值是否为空或0，如果是则不显示对比
          const isOldValueEmpty = oldVal === '' || oldVal === '0' || oldVal === '0.00' || oldVal === '0.0';
          
          // 只有当值不同且不是都为空时才记录变更
          // 并且原值不能为空或0
          if (oldVal !== newVal && !(oldVal === '' && newVal === '') && !isOldValueEmpty) {
            // 对于图片字段，空值显示为"无图片"，其他字段显示为"空"
            const isImageField = this.isImageField(field);
            const emptyDisplay = isImageField ? '无图片' : '空';
            
            changes.push({
              field: field,
              fieldName: fieldName,
              oldValue: oldVal === '' ? emptyDisplay : oldVal,
              newValue: newVal === '' ? emptyDisplay : newVal,
              changeType: this.getChangeType(oldVal, newVal)
            });
          }
        });

        this.dataChanges = changes;

      } catch (error) {
        console.error('对比数据变更失败:', error);
        this.dataChanges = [];
      }
    },

    // 获取变更类型
    getChangeType(oldValue, newValue) {
      if (!oldValue || oldValue === '空' || oldValue === '无图片') {
        return 'add';
      } else if (!newValue || newValue === '空' || newValue === '无图片') {
        return 'delete';
      } else {
        return 'edit';
      }
    },

    // 获取变更类型显示文本
    getChangeTypeText(changeType) {
      const typeMap = {
        'add': '新增',
        'edit': '修改',
        'delete': '删除'
      };
      return typeMap[changeType] || changeType;
    },

    // 判断字段是否为图片字段
    isImageField(field) {
      const imageFields = [
        'contract_file',
        'settlement_images', 
        'invoiced_images',
        'payment_images',
        'actual_received_images'
      ];
      return imageFields.includes(field);
    },

    // 获取收款计划变更类型显示文本
    getPlanChangeTypeText(changeType) {
      const typeMap = {
        'add': '新增',
        'delete': '删除',
        'count_change': '数量变更',
        'plan_add': '计划新增',
        'plan_delete': '计划删除',
        'plan_edit': '计划修改'
      };
      return typeMap[changeType] || changeType;
    },

    // 获取收款计划状态显示文本
    getPlanStatusText(status) {
      if (!status) return '未知';
      const statusMap = {
        '审核中': '审核中',
        '已通过': '已通过',
        '已拒绝': '已拒绝',
        '异常': '异常',
        '合同审批': '合同审批',
        'pending': '待审核',
        'approved': '已通过',
        'rejected': '已拒绝'
      };
      return statusMap[status] || status || '未知';
    },

    // 获取收款计划状态CSS类名
    getPlanStatusClass(status) {
      if (!status) return 'unknown';
      const classMap = {
        '审核中': 'pending',
        '已通过': 'approved',
        '已拒绝': 'rejected',
        '异常': 'error',
        '合同审批': 'pending',
        'pending': 'pending',
        'approved': 'approved',
        'rejected': 'rejected'
      };
      return classMap[status] || 'unknown';
    },

    // 获取收款计划变更摘要文本
    getPlanSummaryText(change) {
      const oldCount = change.oldValue ? change.oldValue.length : 0;
      const newCount = change.newValue ? change.newValue.length : 0;

      if (oldCount === 0 && newCount > 0) {
        return `新增了 ${newCount} 个收款计划`;
      } else if (oldCount > 0 && newCount === 0) {
        return `删除了 ${oldCount} 个收款计划`;
      } else if (oldCount !== newCount) {
        return `收款计划数量从 ${oldCount} 个变为 ${newCount} 个`;
      } else {
        return `修改了收款计划内容`;
      }
    },

    // 获取项目计划列表数据
    async getProjectPlanList() {
      try {
        console.log('开始获取项目计划列表，项目ID:', this.projectId);

        let response;
        try {
          response = await http.post('project/getProjectPlanList', {
            id: this.projectId
          });
          console.log('项目计划列表接口响应:', response);
        } catch (error) {
          console.log('项目计划列表接口调用失败，尝试备用方案:', error);

          // 备用方案：使用uni.request直接调用完整URL
          try {
            const token = uni.getStorageSync('sc-token') || '';
            response = await new Promise((resolve, reject) => {
              uni.request({
                url: 'https://data.web1995.top/api/project/getProjectPlanList',
                method: 'POST',
                data: { id: this.projectId },
                header: {
                  'Content-Type': 'application/json',
                  'token': token
                },
                success: (res) => resolve(res.data),
                fail: (err) => reject(err)
              });
            });
            console.log('项目计划列表备用方案响应:', response);
          } catch (error2) {
            console.log('项目计划列表备用方案也失败:', error2);
            throw error2;
          }
        }

        console.log('最终项目计划列表接口响应:', response);

        if (response && response.code === 1) {
          this.projectPlanList = response.data || [];
          console.log('获取项目计划列表成功，数据条数:', this.projectPlanList.length);

          // 获取项目计划列表成功后，进行所有数据对比
          this.compareDataChanges();
          this.comparePlanListChanges();
        } else {
          console.error('获取项目计划列表失败:', response?.msg || '未知错误');
          this.projectPlanList = [];
        }
      } catch (error) {
        console.error('获取项目计划列表异常:', error);

        // 显示错误信息
        uni.showToast({
          title: `项目计划列表接口调用失败: ${error.message || '未知错误'}`,
          icon: 'none',
          duration: 3000
        });

        this.projectPlanList = [];
      }
    },

    // 对比收款计划数据变更
    comparePlanListChanges() {
      try {
        console.log('开始对比收款计划数据变更:', {
          oldProjectData: this.oldProjectData,
          projectPlanList: this.projectPlanList
        });

        // 如果旧数据为null或新数据为空，则不进行对比
        if (this.oldProjectData === null || !this.projectPlanList) {
          console.log('旧数据为null或新数据为空，不进行对比');
          return;
        }

        const oldPlanList = this.oldProjectData ? (this.oldProjectData.planList || []) : [];
        const newPlanList = this.projectPlanList || [];
        
        console.log('收款计划数据:', {
          oldPlanList: oldPlanList,
          newPlanList: newPlanList,
          oldPlanListLength: oldPlanList.length,
          newPlanListLength: newPlanList.length
        });
        
        // 如果新数据为空，则不展示
        if (newPlanList.length === 0) {
          console.log('新数据为空，不展示');
          return;
        }

        // 只有当旧数据存在且不为空时才进行对比，如果旧数据为空或0就不要展示
        if (oldPlanList.length > 0) {
          console.log('开始对比收款计划数据');
          // 对比收款计划数据（通过ID匹配）
          const planChanges = this.comparePlanListDataById(oldPlanList, newPlanList);
          
          console.log('收款计划对比结果:', planChanges);
          
          if (planChanges.length > 0) {
            // 过滤掉没有实际变更的项目
            const realChanges = planChanges.filter(change => {
              if (change.type === 'plan_edit' && change.changes) {
                return change.changes.length > 0;
              }
              return true; // 其他类型都认为是真实变更
            });
            
            console.log('过滤后的真实变更:', realChanges);
            
            if (realChanges.length > 0) {
              this.dataChanges.push({
                field: 'planList',
                fieldName: '收款计划',
                oldValue: oldPlanList,
                newValue: newPlanList,
                changeType: this.getPlanListChangeType(oldPlanList, newPlanList),
                planChanges: realChanges
              });
              console.log('已添加收款计划变更到dataChanges:', this.dataChanges);
            } else {
              console.log('没有真实变更，不添加');
            }
          } else {
            console.log('没有收款计划变更');
          }
        } else {
          console.log('旧数据为空，不展示收款计划对比');
        }

      } catch (error) {
        console.error('对比收款计划数据变更失败:', error);
      }
    },

    // 对比收款计划具体数据（通过ID匹配）
    comparePlanListDataById(oldList, newList) {
      const changes = [];
      
      console.log('收款计划对比数据:', {
        oldList: oldList,
        newList: newList,
        oldIds: oldList.map(item => item.id),
        newIds: newList.map(item => item.id)
      });

      // 如果旧数据为空，则不进行对比（不显示任何变更）
      if (oldList.length === 0) {
        return changes; // 返回空数组，不显示任何变更
      }

      // 如果旧数据有值，新数据为空，则为删除
      if (oldList.length > 0 && newList.length === 0) {
        oldList.forEach(item => {
          changes.push({
            type: 'plan_delete',
            message: `删除收款计划：${item.content || '第X期'}`,
            data: item
          });
        });
        return changes;
      }

      // 如果都有数据，通过ID进行匹配对比
      if (oldList.length > 0 && newList.length > 0) {
        // 创建ID映射
        const oldMap = new Map(oldList.map(item => [item.id, item]));
        const newMap = new Map(newList.map(item => [item.id, item]));

        // 只检查旧数据中存在的ID，不检查新增的ID
        oldList.forEach(oldItem => {
          const newItem = newMap.get(oldItem.id);
          if (newItem) {
            // 检查修改的计划（ID相同但内容不同）
            const itemChanges = this.comparePlanItem(oldItem, newItem);
            if (itemChanges.length > 0) {
              changes.push({
                type: 'plan_edit',
                message: `修改收款计划：${newItem.content || '第X期'}`,
                data: newItem,
                changes: itemChanges
              });
            }
          } else {
            // 检查删除的计划（旧列表中有，新列表中没有）
            changes.push({
              type: 'plan_delete',
              message: `删除收款计划：${oldItem.content || '第X期'}`,
              data: oldItem
            });
          }
        });
      }

      console.log('收款计划对比结果:', changes);
      return changes;
    },

    // 对比单个收款计划项
    comparePlanItem(oldItem, newItem) {
      const changes = [];
      const fieldsToCompare = {
        'payment_amount': '计划收款金额',
        'actual_received_amount': '实际收款金额',
        'images': '相关图片',
        'payment_time': '收款时间'
      };

      console.log('对比收款计划项:', {
        oldItem: oldItem,
        newItem: newItem
      });

      Object.keys(fieldsToCompare).forEach(field => {
        const oldValue = oldItem[field];
        const newValue = newItem[field];
        const fieldName = fieldsToCompare[field];

        // 处理空值情况
        const oldVal = oldValue === null || oldValue === undefined ? '' : String(oldValue).trim();
        const newVal = newValue === null || newValue === undefined ? '' : String(newValue).trim();
        
        // 检查原值是否为空或0，如果是则不显示对比
        const isOldValueEmpty = oldVal === '' || oldVal === '0' || oldVal === '0.00' || oldVal === '0.0';
        
        console.log(`对比字段 ${field}:`, {
          oldValue: oldValue,
          newValue: newValue,
          oldVal: oldVal,
          newVal: newVal,
          isDifferent: oldVal !== newVal,
          bothEmpty: oldVal === '' && newVal === '',
          isOldValueEmpty: isOldValueEmpty
        });
        
        // 只有当值真正不同且不是都为空时才记录变更
        // 并且原值不能为空或0
        if (oldVal !== newVal && !(oldVal === '' && newVal === '') && !isOldValueEmpty) {
          // 对于images字段，空值显示为"无图片"，其他字段显示为"空"
          const emptyDisplay = field === 'images' ? '无图片' : '空';
          
          changes.push({
            field: field,
            fieldName: fieldName,
            oldValue: oldVal === '' ? emptyDisplay : oldVal,
            newValue: newVal === '' ? emptyDisplay : newVal
          });
          
          console.log(`字段 ${field} 有变更:`, {
            oldValue: oldVal === '' ? emptyDisplay : oldVal,
            newValue: newVal === '' ? emptyDisplay : newVal
          });
        }
      });

      console.log('收款计划项对比结果:', changes);
      return changes;
    },

    // 获取收款计划变更类型
    getPlanListChangeType(oldList, newList) {
      if (oldList.length === 0 && newList.length > 0) {
        return 'add';
      } else if (oldList.length > 0 && newList.length === 0) {
        return 'delete';
      } else {
        return 'edit';
      }
    },

    // 审核拒绝
    async rejectProject() {
      if (this.isSubmitting) return;

      if (!this.auditOpinion.trim()) {
        uni.showToast({
          title: '请填写拒绝原因',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      this.isSubmitting = true;

      try {
        console.log('审核拒绝，项目ID:', this.projectId, '原因:', this.auditOpinion);

        // 获取本地存储的用户角色
        const userRole = uni.getStorageSync('user-role') || uni.getStorageSync('user_role');
        console.log('当前用户角色:', userRole);

        let response;
        let apiUrl;

        // 根据角色选择不同的接口
        if (userRole == 4) { // 经理端
          apiUrl = 'project/jlApprovedReview';
          console.log('调用经理端审核接口');
        } else if (userRole == 2) { // 财务端
          apiUrl = 'project/approvedReview';
          console.log('调用财务端审核接口');
        } else {
          throw new Error('未知的用户角色');
        }

        // 调用对应的审核接口
        try {
          response = await http.post(apiUrl, {
            id: this.projectId,
            remark: this.auditOpinion
          });
          console.log('审核接口响应:', response);
        } catch (error) {
          console.log('主要接口调用失败，尝试备用方案:', error);

          // 备用方案：使用uni.request直接调用完整URL
          try {
            const token = uni.getStorageSync('sc-token') || '';
            const fullUrl = userRole == 4
              ? 'https://data.web1995.top/api/project/jlApprovedReview'
              : 'https://data.web1995.top/api/project/approvedReview';

            response = await new Promise((resolve, reject) => {
              uni.request({
                url: fullUrl,
                method: 'POST',
                data: {
                  id: this.projectId,
                  remark: this.auditOpinion
                },
                header: {
                  'Content-Type': 'application/json',
                  'token': token
                },
                success: (res) => resolve(res.data),
                fail: (err) => reject(err)
              });
            });
            console.log('备用方案响应:', response);
          } catch (error2) {
            console.log('备用方案也失败:', error2);
            throw error2;
          }
        }

        // 处理接口响应
        if (response && response.code === 1) {
          uni.showToast({
            title: '审核拒绝成功',
            icon: 'success',
            duration: 2000
          });

          // 清空意见
          this.auditOpinion = '';

          // 可以在这里刷新页面数据或跳转
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        } else {
          throw new Error(response?.msg || '审核失败');
        }

      } catch (error) {
        console.error('审核拒绝失败:', error);
        uni.showToast({
          title: `审核失败: ${error.message}`,
          icon: 'none',
          duration: 3000
        });
      } finally {
        this.isSubmitting = false;
      }
    }
  }
}
</script>

<style scoped>
.audit-detail-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 0;
}

.info-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.project-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
}

/* 信息分类样式 */
.info-category {
  margin-bottom: 32rpx;
}

.info-category:last-child {
  margin-bottom: 0;
}

.category-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 16rpx;
  padding-left: 12rpx;
  border-left: 4rpx solid #409eff;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  min-height: 60rpx;
  gap: 16rpx;
}

.info-row:nth-child(even) {
  background: #fff;
  border: 1rpx solid #f0f0f0;
}


.info-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 140rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  text-align: right;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-value.primary {
  color: #409eff;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-value.amount {
  color: #fa8c16;
  font-weight: bold;
}

.info-value.phone {
  color: #52c41a;
  text-decoration: underline;
}


/* 财务信息网格 */
.finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.finance-item {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  border: 1rpx solid #e9ecef;
}

.finance-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.finance-value {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
}

.finance-value.settlement {
  color: #409eff;
}

.finance-value.invoiced {
  color: #722ed1;
}

.finance-value.uninvoiced {
  color: #fa8c16;
}

.finance-value.received {
  color: #52c41a;
}

.finance-value.unpaid {
  color: #ff4d4f;
}

/* 图片相关样式 */
.files-title {
  font-size: 26rpx;
  color: #666;
  margin: 20rpx 0 12rpx 0;
  font-weight: 500;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
}

.image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8rpx;
  overflow: hidden;
  cursor: pointer;
}

.contract-img, .settlement-img, .invoice-img, .payment-img, .actual-received-img, .received-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.image-icon {
  font-size: 40rpx;
  color: #fff;
}

.image-index {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  font-size: 20rpx;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
}

.image-count-tip {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
  text-align: right;
}

.image-count-badge {
  background: #409eff;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
  text-align: center;
}

.project-status.completed {
  background: #52c41a;
  color: #fff;
}

.project-status.pending {
  background: #409eff;
  color: #fff;
}

.project-status.abnormal {
  background: #ff4d4f;
  color: #fff;
}

.project-status.unknown {
  background: #999;
  color: #fff;
}

.remark-content {
  background: #f8f9fa;
  padding: 16rpx;
  border-radius: 6rpx;
  border-left: 4rpx solid #3b82f6;
}

.remark-content text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.5;
}

/* 重新设计的审批流程样式 */
.flow-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
}

.flow-header-bar {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  padding: 24rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flow-main-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.flow-node-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.flow-container {
  padding: 30rpx;
  position: relative;
}

.flow-node {
  display: flex;
  margin-bottom: 24rpx;
  position: relative;
}

.flow-node:last-child {
  margin-bottom: 0;
}

/* 节点序号样式 */
.node-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  position: relative;
}

.index-number {
  width: 36rpx;
  height: 36rpx;
  background: #4f46e5;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rpx;
  font-weight: bold;
  z-index: 2;
}

.index-line {
  width: 2rpx;
  height: 50rpx;
  background: #e2e8f0;
  margin-top: 6rpx;
}

/* 节点卡片样式 */
.node-card {
  flex: 1;
  background: #fff;
  border: 1rpx solid #e2e8f0;
  border-radius: 12rpx;
  padding: 20rpx;
  position: relative;
  min-height: 80rpx;
}

.node-card.active-node {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #f8faff, #eef2ff);
  box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.1);
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.user-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #1e293b;
}

.user-status {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
  color: #fff;
}

/* 审批流程状态颜色区分 */
.status-add {
  background: #16a34a; /* 绿色：新增 */
}
.status-signed {
  background: #22c55e; /* 绿色深一点：已签约 */
}
.status-contract {
  background: #2563eb; /* 蓝色：合同审批 */
}
.status-pending {
  background: #facc15; /* 亮黄色：待审批/收款计划审批/收款中 */
  color: #7c2d12; /* 深色文字提升对比度 */
}
.status-approved {
  background: #10b981; /* 通过：绿色 */
}
.status-rejected {
  background: #ef4444; /* 拒绝：红色 */
}
.status-unknown {
  background: #6b7280; /* 灰色：未知 */
}

.user-status.current-user {
  background: #facc15; /* 当前审批人的待审批状态显示亮黄色 */
  color: #7c2d12; /* 深色文字提升对比度 */
}

.node-time {
  font-size: 20rpx;
  color: #94a3b8;
}

/* 审批意见样式 */
.node-remark {
  margin-bottom: 12rpx;
}

.remark-title {
  font-size: 22rpx;
  color: #64748b;
  margin-bottom: 8rpx;
  display: block;
  font-weight: 500;
}

.remark-content {
  background: #f1f5f9;
  padding: 12rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #334155;
  line-height: 1.5;
  border-left: 3rpx solid #4f46e5;
}

/* 预留区域样式 */
.node-changes {
  margin-bottom: 12rpx;
  background: #fef3c7;
  border-radius: 8rpx;
  padding: 12rpx;
  border-left: 3rpx solid #f59e0b;
}

.changes-title {
  font-size: 20rpx;
  color: #92400e;
  font-weight: 600;
  margin-bottom: 6rpx;
  display: block;
}

.changes-placeholder {
  font-size: 18rpx;
  color: #a16207;
  font-style: italic;
}

.node-files {
  margin-bottom: 12rpx;
  background: #f3e8ff;
  border-radius: 8rpx;
  padding: 12rpx;
  border-left: 3rpx solid #7c3aed;
}

.files-title {
  font-size: 20rpx;
  color: #6b21a8;
  font-weight: 600;
  margin-bottom: 6rpx;
  display: block;
}

.files-placeholder {
  font-size: 18rpx;
  color: #7c2d92;
  font-style: italic;
}

/* 当前审批人标识 */
.current-tag {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  width: fit-content;
  margin-top: 8rpx;
}

.tag-text {
  font-size: 18rpx;
  font-weight: 600;
}

/* 空状态样式 */
.flow-empty-state {
  text-align: center;
  padding: 60rpx 30rpx;
  color: #94a3b8;
}

.empty-icon {
  font-size: 60rpx;
  display: block;
  margin-bottom: 16rpx;
}

.empty-text {
  font-size: 26rpx;
  color: #64748b;
}

/* 审核历史样式 */
.audit-history {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.history-item {
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  border-left: 4rpx solid #ff9800;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.history-role {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
}

.history-time {
  font-size: 20rpx;
  color: #666;
}

.history-content {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.history-action {
  font-size: 22rpx;
  color: #ff9800;
  font-weight: bold;
}

.history-opinion {
  font-size: 20rpx;
  color: #666;
  line-height: 1.4;
}

/* 审核操作样式 */
.action-section {
  padding: 20rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 8rpx;
}

.action-header {
  margin-bottom: 20rpx;
}

.action-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.action-subtitle {
  font-size: 22rpx;
  color: #666;
}

.opinion-input {
  position: relative;
  margin-bottom: 20rpx;
}

.opinion-textarea {
  width: 100%;
  height: 120rpx;
  padding: 16rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  line-height: 1.4;
  resize: none;
  box-sizing: border-box;
}

.opinion-count {
  position: absolute;
  bottom: 8rpx;
  right: 16rpx;
  font-size: 20rpx;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  flex: 1;
  padding: 20rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.approve-btn {
  background: #10b981;
  color: #ffffff;
}

.approve-btn:hover:not(:disabled) {
  background: #059669;
}

.reject-btn {
  background: #ef4444;
  color: #ffffff;
}

.reject-btn:hover:not(:disabled) {
  background: #dc2626;
}

/* 禁用状态样式 */
.action-btn.disabled,
.action-btn:disabled {
  background: #9ca3af !important;
  color: #6b7280 !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.action-btn.disabled:hover,
.action-btn:disabled:hover {
  background: #9ca3af !important;
}

.flow-status.completed {
  background: #10b981;
  color: #fff;
}

/* 金额字段样式 */
.uninvoiced-amount {
  color: #fa8c16;
  font-weight: bold;
}

.received-amount {
  color: #52c41a;
  font-weight: bold;
}

.unpaid-amount {
  color: #ff4d4f;
  font-weight: bold;
}

/* 数据变更对比样式 */
.change-count-badge {
  background: #ff6b35;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: 500;
}

/* 收款计划样式 */
.plan-count-badge {
  background: #4CAF50;
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.plan-list {
  padding: 0;
}

.plan-item {
  background: #f8f9fa;
  border: 1rpx solid #e9ecef;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #e9ecef;
}

.plan-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.plan-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.plan-status-pending {
  background: #fff3cd;
  color: #856404;
}

.plan-status-approved {
  background: #d4edda;
  color: #155724;
}

.plan-status-rejected {
  background: #f8d7da;
  color: #721c24;
}

.plan-status-error {
  background: #f8d7da;
  color: #721c24;
}

.plan-status-unknown {
  background: #e9ecef;
  color: #6c757d;
}

.plan-content {
  padding: 20rpx;
}

.plan-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.plan-row:last-child {
  margin-bottom: 0;
}

.plan-label {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
  flex-shrink: 0;
}

.plan-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.plan-amount {
  font-weight: 600;
  color: #2e7d32;
}

.plan-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 10rpx;
}

.plan-image-item {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #ddd;
}

.plan-img {
  width: 100%;
  height: 100%;
}

.plan-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.plan-image-item:active .plan-image-overlay {
  opacity: 1;
}

.plan-image-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
}

/* 收款计划直接显示样式 */
.plan-show-item {
  background: #f8f9fa;
  border: 1rpx solid #e9ecef;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.plan-show-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-bottom: 1rpx solid #e9ecef;
}

.plan-show-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.plan-show-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.plan-show-content {
  padding: 20rpx;
}

.plan-show-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.plan-show-row:last-child {
  margin-bottom: 0;
}

.plan-show-label {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
  flex-shrink: 0;
}

.plan-show-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.changes-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-top: 20rpx;
}

.change-item {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  border-left: 4rpx solid #ff6b35;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.change-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.change-field {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.change-type {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.change-type-add {
  background: #52c41a;
  color: #fff;
}

.change-type-edit {
  background: #1890ff;
  color: #fff;
}

.change-type-delete {
  background: #ff4d4f;
  color: #fff;
}

.change-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.change-row {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
}

.change-label {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
  min-width: 80rpx;
  flex-shrink: 0;
}

.change-old-value {
  font-size: 22rpx;
  color: #ff4d4f;
  background: #fff2f0;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  border: 1rpx solid #ffccc7;
  flex: 1;
  word-break: break-all;
}

.change-new-value {
  font-size: 22rpx;
  color: #52c41a;
  background: #f6ffed;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  border: 1rpx solid #b7eb8f;
  flex: 1;
  word-break: break-all;
}

/* 合同文件图片样式 */
.contract-file-changes {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.file-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  flex: 1;
}

.file-image-item {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  border-radius: 6rpx;
  overflow: hidden;
  cursor: pointer;
}

.file-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.file-image-item:hover .file-overlay {
  opacity: 1;
}

.file-icon {
  font-size: 20rpx;
  color: #fff;
}

/* 收款计划变更样式 */
.plan-list-changes {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.plan-summary {
  background: #e6f7ff;
  padding: 12rpx 16rpx;
  border-radius: 6rpx;
  border-left: 4rpx solid #1890ff;
}

.plan-summary-text {
  font-size: 24rpx;
  color: #1890ff;
  font-weight: 500;
}

.plan-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.plan-change-item {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 12rpx;
  border-left: 3rpx solid #52c41a;
}

.plan-change-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 8rpx;
}

.plan-change-type {
  background: #52c41a;
  color: #fff;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
  font-size: 18rpx;
  font-weight: 500;
}

.plan-change-message {
  font-size: 22rpx;
  color: #333;
  flex: 1;
}

.plan-field-changes {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.plan-field-change {
  background: #fff;
  border-radius: 4rpx;
  padding: 8rpx;
  border: 1rpx solid #e9ecef;
}

.plan-field-row {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
  margin-bottom: 4rpx;
}

.plan-field-row:last-child {
  margin-bottom: 0;
}

.plan-field-label {
  font-size: 20rpx;
  color: #666;
  font-weight: 500;
  min-width: 100rpx;
  flex-shrink: 0;
}

.plan-field-old-value {
  font-size: 20rpx;
  color: #ff4d4f;
  background: #fff2f0;
  padding: 2rpx 6rpx;
  border-radius: 3rpx;
  flex: 1;
  word-break: break-all;
}

.plan-field-new-value {
  font-size: 20rpx;
  color: #52c41a;
  background: #f6ffed;
  padding: 2rpx 6rpx;
  border-radius: 3rpx;
  flex: 1;
  word-break: break-all;
}

.plan-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
  flex: 1;
}

.plan-image-item {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  border-radius: 4rpx;
  overflow: hidden;
  cursor: pointer;
}

.plan-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.plan-image-item:hover .plan-image-overlay {
  opacity: 1;
}

.plan-image-icon {
  font-size: 16rpx;
  color: #fff;
}

/* 删除详情样式 */
.plan-delete-details {
  margin-top: 8rpx;
  background: #fff2f0;
  border-radius: 6rpx;
  padding: 12rpx;
  border-left: 3rpx solid #ff4d4f;
}

.plan-delete-title {
  font-size: 20rpx;
  color: #ff4d4f;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.plan-delete-item {
  background: #fff;
  border-radius: 4rpx;
  padding: 8rpx;
}

.plan-delete-row {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
  margin-bottom: 4rpx;
}

.plan-delete-row:last-child {
  margin-bottom: 0;
}

.plan-delete-label {
  font-size: 18rpx;
  color: #666;
  font-weight: 500;
  min-width: 120rpx;
  flex-shrink: 0;
}

.plan-delete-value {
  font-size: 18rpx;
  color: #ff4d4f;
  flex: 1;
  word-break: break-all;
}

/* 新增详情样式 */
.plan-add-details {
  margin-top: 8rpx;
  background: #f6ffed;
  border-radius: 6rpx;
  padding: 12rpx;
  border-left: 3rpx solid #52c41a;
}

.plan-add-title {
  font-size: 20rpx;
  color: #52c41a;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.plan-add-item {
  background: #fff;
  border-radius: 4rpx;
  padding: 8rpx;
}

.plan-add-row {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
  margin-bottom: 4rpx;
}

.plan-add-row:last-child {
  margin-bottom: 0;
}

.plan-add-label {
  font-size: 18rpx;
  color: #666;
  font-weight: 500;
  min-width: 120rpx;
  flex-shrink: 0;
}

.plan-add-value {
  font-size: 18rpx;
  color: #52c41a;
  flex: 1;
  word-break: break-all;
}

/* 字段变更详情样式 */
.plan-changes-detail {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.plan-field-change {
  background: #fff;
  border-radius: 6rpx;
  padding: 16rpx;
  border: 1rpx solid #e5e5e5;
}

.plan-field-row {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.plan-field-label {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

.plan-field-values {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.plan-field-old {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}

.plan-field-new {
  font-size: 22rpx;
  color: #007aff;
  font-weight: 600;
}

/* 完整数据显示样式 */
.plan-full-data {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

</style>
